<template>
  <div>
      <el-dialog
        title="添加用户"
        :visible.sync="showUserAdd"
        width="40%" @close="setShowUserAdd(false)">
        
        <el-form ref="form" :model="userObj" label-width="80px">
            <el-form-item label="姓名">
                <el-input v-model="userObj.userName"></el-input>
            </el-form-item>
            <el-form-item label="真实姓名">
                <el-input v-model="userObj.realName"></el-input>
            </el-form-item>

            <el-form-item label="角色">
                <el-checkbox-group v-model="checkRoleList">
                    <el-checkbox v-for="role in roleList" :label="role.id"
                     :value="role.id" :key="role.id" @change="findGrade">{{role.name}}</el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <el-form-item label="拥有权限">
                {{gradeInfo}}
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="setShowUserAdd(false)">取 消</el-button>
            <el-button type="primary" @click="addUserObj">添加</el-button>
        </span>
        </el-dialog>
  </div>
</template>

<script>
import {mapState,mapActions,mapMutations} from "vuex"
export default {
    data(){
        return {
            userObj:{}, //要添加的用户对象
            checkRoleList:[], //添加用户绑定的角色ID集合
            roleList:[], //所有角色集合
            gradeInfo:"" //添加用户绑定角色集合的权限信息
        }
    },
    methods:{
        ...mapMutations('user',['setShowUserAdd']),
        ...mapActions('user',['findByItem']),
        
        async findGrade(){ //按角色集合查询权限信息
            if(this.checkRoleList.length == 0){//如果没有绑定的角色，则跳出
                this.gradeList.length = 0;
                return;
            }
            //发送ajax请求，按角色ID数组查询权限集合
            var gradeList = await this.ajax.getSubmit("/project/grade/findByRole",{roleArray:this.checkRoleList});
            
            //拼接权限名称字符串
            var str = "";
            for(var i=0;i<gradeList.length;i++){
                str += gradeList[i].name+"、";
            }
            this.gradeInfo = str.substring(0,str.length-1);
        },
        async addUserObj(){//添加用户
            //设置用户的角色数组
            this.userObj.roleArray = this.checkRoleList;
            //向服务器发送ajax请求，完成添加
            var info =  await this.ajax.getSubmit("/project/user/add",this.userObj);
            if(info == "ok"){//如果返回值为ok，关闭添加弹出层，并重新查询用户信息
                this.setShowUserAdd(false);
                this.findByItem();
            }
        },
        async findRoleList(){//查询所有角色
            this.roleList = await this.ajax.getSubmit("/project/role/findAll",{});
        }
    },
    computed:{
        showUserAdd:{
          set(isSow){
            this.setShowUserAdd(isSow);
          },
          get(){
            return  this.$store.state.user.showUserAdd
          }
        }
       
    },
    created(){
        this.findRoleList();
    }
}
</script>

<style>

</style>